<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        header{
            display: flex;
            width: 100%;
            line-height: 50px;
            background-color: rgb(23, 149, 198);
            justify-content: space-between;
           color: white;
           padding: 0 20px;
        }
        .content{
            display: flex;
        }
        aside{
            width: 100px;
            background-color: rgb(23, 149, 198);
            text-align: center;
        }
        aside section{
            line-height: 40px;
            margin-top: 20px;
            color: rgba(236, 229, 229, 0.852);
        }
        aside .active{
            color: white;
            background-color: rgb(33, 74, 90);
        }
        main{
            flex: 1;
            padding: 50px 40px;
        }
        main input{
            width: 200px;
            height: 30px;
            border-radius: 20px;
            padding: 0 20px;
            outline: none;
            border: 1px solid gray;
        }
        main .button1{
            line-height: 30px;
            padding: 0 20px;
            border-radius: 10px;
            border: 1px solid gray;
            color: white;
            margin-left: 20px;
            background-color: rgba(63, 146, 63, 0.861);
        }
        main .button2{
            display: block;
            margin-top: 20px;
            line-height: 30px;
            padding: 0 20px;
            border-radius: 10px;
            border: 1px solid gray;
            color: white;
            background-color: rgba(63, 146, 63, 0.861);
        }
        main .button2 span{
            margin-right: 10px;
        }
        table{
            text-align: center;
            margin-top: 20px;
            font-size: 14px;
            border-collapse: collapse;
            /* border: 1px solid gray; */
        }
        table td{
           padding: 10px 20px;
           border-bottom: 0.5px solid gray;
        }
        table thead tr{
            font-weight: 800;
        }
        table tbody tr td .zhengchang{
            padding: 2px 10px;
            border: 1px solid gray;
            border-radius: 10px;
            color: white;
            background-color: rgba(63, 146, 63, 0.861);
        }
        footer{
            margin-top: 40px;
            margin-left: 400px;
        }
        footer button{
            font-weight: 700;
            border:1px solid gray;
            line-height: 30px;
            padding: 0 20px;
            margin: 0 10px;
            border-radius: 10px;
            background-color: white;
        }
    </style>
</head>
<body>
    <header>
        <span>9466云专题</span>
        <span><span class="iconfont icon-haoyou"></span>龙猫(9466云专题)</span>
    </header>
    <div class="content">
        <aside>
            <section><span class="iconfont icon-shouye-xianxing"></span>首页</section>
            <section><span class="iconfont icon-zhuanti"></span>专题</section>
            <section class="active"><span class="iconfont icon-haoyou"></span>用户</section>
            <section><span class="iconfont icon-shezhi"></span>设置</section>
            <section><span class="iconfont icon-rizhi"></span>日志</section>
        </aside>
        <main>
            <input type="text" placeholder="搜索用户">
            <button class="button1">搜索</button>
            <button class="button2"><span class="iconfont icon-jiahao"></span>添加用户</button>
            <table>
                <thead>
                    <tr>
                        <td>邮箱（账户）</td>
                        <td>姓名</td>
                        <td>电话</td>
                        <td>所属组</td>
                        <td>管理员</td>
                        <td>状态</td>
                        <td>操作</td>
                    </tr>
                </thead>
                <tbody>
                    <!-- <tr>
                        <td>123@qq.com</td>
                        <td>马宏闫</td>
                        <td>15623892365</td>
                        <td>编辑2</td>
                        <td>是</td>
                        <td><span class="zhengchang">正常</span></td>
                        <td><span>编辑</span><span>删除</span></td>
                    </tr> -->
                    <!-- <tr>
                        <td>123@qq.com</td>
                        <td>马宏闫</td>
                        <td>15623892365</td>
                        <td>编辑2</td>
                        <td>是</td>
                        <td><span class="zhengchang">正常</span> </td>
                        <td><span>编辑</span><span>删除</span></td>
                    </tr> -->
                    <!-- <tr>
                        <td>123@qq.com</td>
                        <td>马宏闫</td>
                        <td>15623892365</td>
                        <td>编辑2</td>
                        <td>是</td>
                        <td><span class="zhengchang">正常</span></td>
                        <td><span>编辑</span><span>删除</span></td>
                     </tr> -->
                </tbody>
            </table>
            <footer>
                <button>上一页</button>
                <button>下一页</button>
            </footer>
        </main>
    </div>
    
    
</body>
</html>
<script src="./promise-ajax.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.0/mock.js"></script>
<script src="./mockdata.js"></script>
<script>
    //渲染数据
    function render(res){
        var str = res.map((item,index)=>{
            return`<tr>
                        <td>${item.email}</td>
                        <td>${item.name}</td>
                        <td>${item.phone}</td>
                        <td>${item.ingroup}</td>
                        <td>${item.isadmin?'是':'否'}</td>
                        <td><span class="zhengchang">${item.status?'正常':'异常'}</span> </td>
                        <td><span class="iconfont icon-bianji"><span class="iconfont icon-shanchu"></span></td>
                    </tr>`
        }).join('')
        document.querySelector('tbody').innerHTML = str;
    }
    render(data.list)
</script>
